<template>
  <div class="container">
    <remoteJs :load="load" src="http://api.map.baidu.com/getscript?v=2.0&ak=HbOjhiPjKo5n0z1dYWpTi5ZvqsSm95FD&services=&t=20190123111209" />
    <div class="cont-l">
      <img src="../../assets/res/img/contact-1.png">
    </div>
    <div class="cont-m">
      <img src="../../assets/res/img/contact-2.png" class="cont-h">
      <ul>
        <li>地址：武汉市武昌区珞狮北路茶港1号阳光大厦5楼</li>
        <li>邮编：430000</li>
        <li>联系电话：400-022-9972</li>
        <li>客服售后QQ：2126755803</li>
        <li>市场合作QQ：1821361971</li>
        <li>广告投放QQ：3084749103</li>
        <li>投诉邮箱：service@jiaxunmedia.com</li>
      </ul>
    </div>
    <div class="cont-r">
      <div id="map"></div>
    </div>
  </div>
</template>
<script>
import remoteJs from '@/components/remote-js'
export default {
  components: {
    remoteJs
  },
  data () {
    return {
    }
  },
  mounted () {
  },
  methods: {
    load () {
      let BMap = window.BMap
      var map = new BMap.Map('map')
      var point = new BMap.Point(114.359526, 30.548972)
      map.centerAndZoom(point, 15)
      map.enableScrollWheelZoom(true)
      var opts = { type: BMAP_NAVIGATION_CONTROL_SMALL }
      map.addControl(new BMap.NavigationControl(opts))
      var marker = new BMap.Marker(point)
      map.addOverlay(marker)
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  padding: 60px 0;
  min-height: inherit;
  .cont-l,
  .cont-m,
  .cont-r {
    display: inline-block;
    vertical-align: top;
  }
  .cont-l {
    margin-right: 24px;
  }
  .cont-m {
    padding-top: 20px;
    width: 400px;
    margin-right: 46px;
  }
  .cont-m li {
    font-size: 18px;
    line-height: 36px;
  }
  .cont-m .cont-h {
    margin-bottom: 16px;
  }
  .cont-r {
    padding-top: 20px;
    width: 375px;
    height: 298px;
  }
  div#map {
    width: 100%;
    height: 100%;
  }
}
</style>
